<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- v-on指令: 绑定各种事件 -->
    <!-- v -->
    <div id="app">
      <!-- 1. 简写 -->
      <button @click="age++">{{age}}</button>

      <!-- 2. 绑定的函数(方法), 必须在methods中定义为函数(方法) -->
      <!-- 3.1 如果你的方法没有传实参, vue自动给你事件对象 -->
      <button @click="fn">{{age}}</button>

      <!-- 3.2 如果你的方法传了实参, 内置对象$event是事件对象, 要主动作为实参传进去 -->
      <a href="http://www.baidu.com" @click="add( $event, 5)">{{age}}</a>
    </div>

    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
          content: <span>123</span>,
          age: 20,
        },
        methods: {
          // 💥methods 中定义的方法，可以使用this访问数据和修改数据
          fn: function (e) {
            console.log("e  ----->  ", e);
            this.age++;
          },
          add(e, num) {
            e.preventDefault();
            this.age += num;
          },
        },
      });
    </script>
  </body>
</html>
